<template>
  <div>
    <el-row class="header">
      <el-col :span="4">
        <el-button @click="drawer = true" class="button">
          <i class="iconfont">&#xeaf1;</i>
        </el-button>
      </el-col>
      <el-col :span="4" class="active">我的</el-col>
      <el-col :span="4" class="wen">发现</el-col>
      <el-col :span="4" class="wen">朋友</el-col>
      <el-col :span="4" class="wen">视频</el-col>
      <el-col :span="4">
        <!-- 点击跳转到搜索页面 -->
        <router-link tag="i" :to="{name: 'search'}" class="iconfont">&#xe819;</router-link>
      </el-col>
    </el-row>
    <!-- 轮播图 -->
    <div class="huakuai">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in list" :key="item.id">
          <img :src="item.pic">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 滑块 -->
    <div class="huakuai1">
      <el-row class="dengfen">
        <el-col :span="4" class="icon-list">
          <router-link to="/gedan" class="jia">
            <p class="icon bgcolor">
              <i class="iconfont find">&#xe89e;</i>
              <span>{{new Date().getDate()}}</span>
            </p>
            <p class="wenzi">每日推荐</p>
          </router-link>
        </el-col>
        <el-col :span="4" class="icon-list">
          <router-link to="/gedan" class="jia">
            <p class="icon bgcolor">
              <i class="iconfont find">&#xe516;</i>
            </p>
            <p class="wenzi">歌单</p>
          </router-link>
        </el-col>
        <el-col :span="4" class="icon-list">
          <router-link to="/paihang" class="jia">
            <p class="icon bgcolor">
              <i class="iconfont find">&#xe6c5;</i>
            </p>
              <p class="wenzi">排行榜</p>
          </router-link>
        </el-col>
        <el-col :span="4" class="icon-list">
          <router-link to="/gedan" class="jia">
            <p class="icon bgcolor">
              <i class="iconfont find">&#xe76f;</i>
            </p>
              <p class="wenzi">电台</p>
          </router-link>
        </el-col>
        <el-col :span="4" class="icon-list">
          <router-link to="/gedan" class="jia">
            <p class="icon bgcolor">
              <i class="iconfont find">&#xe51d;</i>
            </p>
              <p class="wenzi">私人FM</p>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <new-die></new-die>
    <!-- 登陆部分 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="ltr"
      size="80%">
      <div class="item-list">
          <!-- 登陆 -->
        <div class="login" v-if="info">
          <img :src="info.picUrl" alt="" class="login-img">
          <p class="nickname">{{info.nickname}}</p>
        </div>
        <!-- 未登录 -->
        <div class="top-box" v-else>
          <span>登陆网易云音乐</span>
          <p>手机电脑多端同步，尽享海量高品质音乐</p>
          <router-link tag="p" :to="{ name: 'phone'}" class="to-login">立即登录</router-link>
        </div>
        <div class="middle-box">
          <ul>
            <li>
              <i class="iconfont">&#xe625;</i>
              <p>myMassion</p>
            </li>
            <li>
              <i class="iconfont">&#xe62e;</i>
              <p>friend</p>
            </li>
            <li>
              <i class="iconfont">&#xe726;</i>
              <p>sikn</p>
            </li>
            <li>
              <i class="iconfont">&#xe601;</i>
              <p>music</p>
            </li>
          </ul>
        </div>
        <div class="bottom-box">
          <div class="out" @click="out">
            退出登录
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import newDie from './components/newDie'
export default {
  name: 'index',
  data () {
    return {
      drawer: false,
      list: [],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        // Some Swiper option/callback...
        autoplay: true,
        loop: true
      }
    }
  },
  computed: {
    info () {
      let info = null
      if (localStorage.user) {
        info = JSON.parse(localStorage.user)
      }
      return info
    }
  },
  components: {
    newDie
  },
  methods: {
    out () {
      if (localStorage.user) {
        localStorage.removeItem('user')
        this.$router.go(0)
      }
    },
    getbanner () {
      this.$axios.get('/api/banner?type=1').then(res => {
        this.list = res.data.banners
        console.log(res.data)
      })
    },
    change () {
      this.$router.push({ name: '' })
    }
  },
  mounted () {
    this.getbanner()
    // 任务：测试接口
    // 解决cors错误，关闭服务，重新打开服务
  }
}
</script>
<style lang="stylus" scoped>
.out
  position absolute
  right .2rem
  bottom .2rem
.login
  margin 0.3rem 0 0 -3.2rem
  width 1.2rem
  padding: 0.1rem 0.5rem
  border-radius: 0.5rem
  font-size: 0.2rem
  color: rgba(0, 0, 0, 0.4)
  text-align center
  .login-img
    width 2rem
    height 2rem
    border-radius 50%
.item-list
    width: 100%
    height: 100%
    display: flex
    flex-direction: column
    align-items: center
  .top-box
    padding: 1rem 0
    width: 100%
    height: 1.1rem
    text-align center
    font-size .2rem
    line-height .3rem
    color: rgba(0, 0, 0, 0.4)
    background #ccc
  .to-login
    margin 0.3rem auto
    width 1.2rem
    padding: 0.1rem 0.5rem
    border: 1px solid rgba(0, 0, 0, 0.4)
    border-radius: 0.5rem
    font-size: 0.2rem
    color: rgba(0, 0, 0, 0.4)
  .middle-box
    ul
      display flex
      justify-content space-around
      width 6.1rem
      height 1.8rem
      align-items center
      li
        text-align center
        width 1rem
        height 1.8rem
        line-height 1.8
        .iconfont
          color red
.jia
  line-height .8rem
  margin-top .3rem
  text-align center
.header
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
  padding: 0 0.23rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
  line-height: 1rem;
  // color black
  text-align center
  .button
    border none
  .iconfont
    color #ccc
  .wen
    color: #999;
    font-size: 0.24rem;
.huakuai
  height 2.9rem
  width 100%
  padding-top .2rem
  img
    height 2.74rem
    width 100%
.huakuai1
  height 2.2rem
  border 1px solid #eaeaea
  .dengfen
    height 2.2rem
    display flex
    justify-content space-around
    align-items center
    // padding-left .16rem
    .icon-list
      height: 1.68rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #000;
      .icon
        width: 0.8rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 50%;
        text-align: center;
        position: relative;
        color: #fff;
        background linear-gradient(to right, #ff5a4c,#ff1d11)
        position relative
        .find
          font-size: 0.5rem;
        span
          position absolute
          left 50%
          width .4rem
          line-height .4rem
          margin-left -(@width/2)
          top .3rem
      .wenzi
        font-size: 0.24rem;
        color #999

</style>
